<template>
    <!-- 回答 -->
    <up-popup :show="show" v-if="show" @close="close" mode="bottom" round="14"
        :custom-style="{ bottom: keyboardHeight + 'px', 'border-radius': '40rpx 40rpx 0 0 !important' }"
        closeOnClickOverlay>
        <view class="popup pd-30">
            <view class="ft1 flex-bwt">
                <text class="ft-32 fw-800">{{ '我来回答' }}</text>
                <image class="close_black_img" @click="close"
                    src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="scaleToFill" />


            </view>
            <view class="mt-24 textBox bd-r40">
                <textarea class="ft-24 c-33" v-model="contents" :placeholder="replysName" :adjust-position="false"
                    maxlength="100" placeholder-class="textarea-placeholder"
                    @keyboardheightchange="handleKeyboardHeightChange" />
            </view>
            <view class="btn_box mt-24 w-100 flex-bwt">
                <view class="ft-24 c-99">{{ contents.length }}/100</view>
                <view class="huifu ft c-ff flex-center" @click="onReplay()">发布</view>
            </view>
            <!-- <view class="pd_bom" :style="{ height: paddingBottom + 'px' }"></view> -->
        </view>
    </up-popup>
</template>
<script setup lang="js">
import {
    ref, defineEmits, defineProps, onMounted, getCurrentInstance,
    nextTick
} from "vue";
let emit = defineEmits(['close', 'onReplay'])
let props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    replysName: {
        type: String,
        default: '回复'
    }
})

const contents = ref('')
const isFocus = ref(true)
const keyboardHeight = ref(0)
const safeAreaBottom = ref(0) // 安全区高度

const close = () => {
    contents.value = ''
    emit('close')
}
const onReplay = () => {

    emit('onReplay', contents.value)
    contents.value = ''


}
const handleKeyboardHeightChange = (e) => {

    // #ifdef MP-WEIXIN || MP-WEIXIN
    keyboardHeight.value = e.detail.height
    if (uni.getSystemInfoSync().platform === 'ios') {
        // uni.pageScrollTo({
        //     scrollTop: 100000, // 滚动到底部
        //     duration: 0
        // })
        keyboardHeight.value = Math.max(e.detail.height - safeAreaBottom.value, 0)
    }
    // #endif


}
const instance = getCurrentInstance()
const onFocus = (e) => {
    isFocus.value = true

}
const onBlur = () => {
    isFocus.value = false
    // paddingBottom.value = 0

}

onMounted(() => {
    // iOS特殊处理

    if (uni.getSystemInfoSync().platform === 'ios') {
        const systemInfo = uni.getSystemInfoSync()
        safeAreaBottom.value = systemInfo.screenHeight - systemInfo.windowHeight

    }
})
</script>
<style lang="scss" scoped>
.active {
    height: 540rpx !important;

}

/* 弹窗容器定位 */
:deep(.up-popup) {
    position: fixed;
    left: 0;
    width: 100%;
    transition: bottom 0.3s;
    border-radius: 40rpx 40rpx 0 0 !important;

}

.popup {
    min-height: 540rpx;
    background: #F8F8F8;
    border-radius: 40rpx 40rpx 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    transition: all 0.3s ease-in-out;

    .pd_bom {
        background: burlywood;
    }

    .custom-input {
        // position: fixed;
        // bottom: 0;
        width: 100%;
        // height: 50px;
        background: red;

    }

    .ios-input {
        // position: absolute;
        // bottom: 0;
        width: 100%;
        // height: 50px;
        background: red;
    }

    .textBox {
        background: #FFFFFF;
        padding: 20rpx;
    }

    //border: 2rpx solid red;
    .huifu {
        width: 128rpx;
        height: 58rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .close_black_img {
        width: 36rpx;
        height: 36rpx;
    }

    .btn_box {
        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    }
}
</style>